<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style type="text/css">
        canvas {
            position: relative;
            box-shadow: 0 0 10px;
            margin-left: 50%;
            right: 250px;
            background-color: #31B0D5;
        }

        div {
            width: 500px;
            height: 200px;
            line-height: 100px;
            position: relative;
            box-shadow: 0 0 10px;
            margin-left: 50%;
            right: 250px;
            font-weight: bold;
            font-size: 3em;
            text-align: center;
            color: aliceblue;
            background-color: #31B0D5;
        }
    </style>
</head>

<body onload="ht()">
<div>Time<br /><span id="A"></span></div>
<canvas id="s" width="500px" height="500px"></canvas>
</body>
<script>
    var a = document.getElementById('A');
    //获取画布对象
    var s = document.getElementById('s');
    //获取一个2d绘图环境(相当于画笔)
    var ctx = s.getContext('2d');
    function ht() {
        //清除画布
        ctx.clearRect(0, 0, 500, 500);

        //绘制表盘
        ctx.lineWidth = 5;//线宽
        ctx.strokeStyle = '#fff';//颜色
        ctx.beginPath();//开始新的绘图路径
        ctx.arc(250, 250, 150, 0 * Math.PI, 2 * Math.PI, false);//设置绘图路径
        ctx.stroke();//绘制路径
        ctx.closePath();//结束绘图路径
        ctx.save();//保存画布

        ctx.lineWidth = 5;
        ctx.strokeStyle = '#fff';
        ctx.beginPath();
        ctx.arc(250, 250, 5, 0 * Math.PI, 2 * Math.PI, false);
        ctx.stroke();
        ctx.closePath();
        ctx.save();

        //绘制时刻度
        for (var i = 0; i < 12; i++) {
            ctx.beginPath();
            ctx.lineWidth = 5;
            ctx.strokeStyle = '#fff';
            ctx.translate(250, 250);
            ctx.rotate(2 / 12 * i * Math.PI);//旋转画布到一定的弧度
            ctx.moveTo(0, 138);//设置线条的起始位置
            ctx.lineTo(0, 150);//设置线条的结束位置
            ctx.stroke();
            ctx.restore();
            ctx.closePath();
            ctx.save();
        }

        //绘制分刻度
        for (var i = 0; i < 60; i++) {
            ctx.beginPath();
            ctx.lineWidth = 3;
            ctx.strokeStyle = '#fff';
            ctx.translate(250, 250);
            ctx.rotate(2 / 60 * i * Math.PI);
            ctx.moveTo(0, 142);
            ctx.lineTo(0, 150);
            ctx.stroke();
            ctx.restore();
            ctx.closePath();
            ctx.save();
        }

        //获取当前系统时间
        var t = new Date();
        a.innerHTML = t.getHours() + ':' + t.getMinutes() + ':' + t.getSeconds();

        //绘制时针
        ctx.beginPath();
        ctx.lineWidth = 5;
        ctx.strokeStyle = '#fff';
        ctx.translate(250, 250);
        ctx.rotate((1 + t.getHours() / 6) * Math.PI);
        ctx.moveTo(0, 0);
        ctx.lineTo(0, 50);
        ctx.stroke();
        ctx.restore();
        ctx.closePath();
        ctx.save();

        ctx.beginPath();
        ctx.lineWidth = 4;
        ctx.strokeStyle = '#333333';
        ctx.arc(250, 250, 4, 0 * Math.PI, 2 * Math.PI, false);
        ctx.stroke();
        ctx.closePath();
        ctx.save();

        //绘制分针
        ctx.beginPath();
        ctx.lineWidth = 3;
        ctx.strokeStyle = '#333333';
        ctx.translate(250, 250);
        ctx.rotate((1 + t.getMinutes() / 30) * Math.PI);
        ctx.moveTo(0, 0);
        ctx.lineTo(0, 100);
        ctx.stroke();
        ctx.restore();
        ctx.closePath();
        ctx.save();


        ctx.beginPath();
        ctx.lineWidth = 3;
        ctx.strokeStyle = 'red';
        ctx.arc(250, 250, 3, 0 * Math.PI, 2 * Math.PI, false);
        ctx.stroke();
        ctx.closePath();
        ctx.save();

        //绘制秒针
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'red';
        ctx.translate(250, 250);
        ctx.rotate((1 + t.getSeconds() / 30) * Math.PI);
        ctx.moveTo(0, 0);
        ctx.lineTo(0, 100);
        ctx.stroke();
        ctx.restore();
        ctx.closePath();
        ctx.save();
    }
    setInterval('ht()', 1000);
</script>

</html>